{% extends 'index.html' %}

{% block head %}
<style type="text/css">
    .display_none{display: none;}
</style>

{% endblock %}

{% block bodyweigh %}
<body style="width: 1600px; background-size: 1600px 200%;">
{% endblock %}

{% block content %}

    <!-- 右侧主体开始 -->
        <div class="page-content" >
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <!-- <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                  <div class="layui-form-item" style="display: inline-block;">
                    <label class="layui-form-label xbs768">日期范围</label>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                  </div>
                </div> 
            </form> -->
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><span class="x-right" style="line-height:40px">共有数据：{{ data|count }} 条</span></xblock>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" value="">
                        </th>
                        <th>
                            ID
                        </th>
                        <th>
                            创建时间
                        </th>
                        <th>
                            类型
                        </th>
                        <th>
                            名字
                        </th>
                        <th>
                            图片
                        </th>
                        <th>
                            是否上首页
                        </th>  
                        <th>
                            优先级
                        </th>                
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody id="banners">
                   
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
        <div id="number" class="display_none"><select id="num"></select></div>
{% endblock %}

{% block script %}
 <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function(){
          laydate = layui.laydate;//日期插件

          //以上模块根据需要引入
          //
          

          
          var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              end.min = datas; //开始日选好后，重置结束日的最小日期
              end.start = datas //将结束日的初始值设定为开始日
            }
          };
          
          var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              start.max = datas; //结束日选好后，重置开始日的最大日期
            }
          };
          
          document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
          }
          document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
          }
          
        });

        //批量删除提交
         function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
         }
         /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-查看*/
        function member_show(title,url,id,w,h){
            x_admin_show(title,url,w,h);
        }



        // 用户-编辑
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h); 
        }

        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }
        </script>

        
        <script>

            for (var i=1;i<100;i++)
                {
                    $("#num").append('<option style="color: #000;" value ="'+i+'">'+i+'</option>');
                }

            {% for i in data %}

            $("#banners").append(

                    '<tr>'+
                        '<td>'+
                            '<input type="checkbox" value="{{loop.index}}" name="">'+
                        '</td>'+
                        '<td>'+
                            '{{loop.index}}'+
                        '</td>'+
                        '<td>'+
                            '{{ i.create_time }}'+
                        '</td>'+
                        '<td>'+
                            '{% if i.type==1 %}游戏{% elif i.type==2 %}赛事{% elif i.type==3 %}新闻{% endif %}'+
                        '</td>'+
                        '<td>'+
                            '{{ i.priority_name }}'+
                        '</td>'+
                        '<td>'+
                            '<img style="width:50px;height:50px" src="{{ i.icon }}" >'+
                        '</td>'+
                        '<td>'+                      
                            '<select style="color: #000;" id="select{{loop.index}}"> <option value ="0" style="color: #000;" {% if i.status==0 %}selected = "selected"{% else %}{% endif %} >否</option><option style="color: #000;" value ="1" {% if i.status==1 %}selected = "selected" {% else %}{% endif %} >是</option></select> <input type="hidden" class="status" value="{{ i.status }}"/>'+
                        '</td>'+
                        '<td>'+                      
                            '<select style="color: #000;" id="num_select{{loop.index}}">'+$("#num").html()+'</select> <input type="hidden" class="num_select" value="{{ i.priority }}"/>'+
                        '</td>'+                                              
                        '<td class="td-manage">'+
                            '<button type="button" style="color: #000;" class="modify">保存</button>  &emsp;'+
                            '<button type="button" style="color: #000;" class="delete">删除</button>'+
                        '</td>'+
                        '<input type="hidden" class="id" value="{{ i.id }}"  />'+
                    '</tr>')

                $("#num_select{{loop.index}} option[value='{{i.priority}}']").attr("selected","selected");
    
                $("#select{{loop.index}}").on("click",function(){
                    var status = $("#select{{loop.index}} option:selected").val();
                    $(this).next().val(status);
                });
                
                $("#num_select{{loop.index}}").on("click",function(){
                    var num = $("#num_select{{loop.index}} option:selected").val();
                    $(this).next().val(num);
                });


                {% endfor %}

        </script>
        

        <script>
            
            $(".modify").on("click",function() {
    
                var id = $(this).parent().parent().find(".id").val();
                var status = $(this).parent().parent().find(".status").val();
                console.log(status);
                var priority = $(this).parent().parent().find(".num_select").val();
            
                params = {
                    "id":id,
                    "status":status,
                    "priority":priority,
                };
                
                $.ajax({
                    url:"/app/banners/modify",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/banners";
                        }else {
                            alert(res.msg);
                        }
                    }
                })
                    
            
            });
            
            
            $(".delete").on("click",function(){
                var id = $(this).parent().parent().find(".id").val();
                params = {"id":id};
                $.ajax({
                    url:"/app/banners/delete",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/banners";
                        }else {
                            alert(res.msg);
                        }
                    }
                })
            });
    
        </script>

{% endblock %}